<template>
	
	<view class="asset">
		<view class="head" style="z-index: 999;">
			<view class="head_text" @click="black()">返回</view>
			<image src="../../../static/public/img/fh.png"
				style="width: 18px;height: 18px;position: absolute;top:33px;left: 15px;"></image>
				<view class="ss">取款记录</view>
			<view style="width: 10%;height: 25px;position: absolute;top:30px;right:5px;font-size: 14px;"  @click="sx(issx)">筛选</view>	
		</view>
		
			
			
			<view v-if="issx" style="width:100%;height: 90px;background-color: #f2f2f2;position: fixed;top:60px;z-index: 99999;font-size: 14px;">
				<view class="sxs" @click="sxselected(5)">全部</view>
				<view class="sxss" @click="sxselected(0)">待审核</view>
				<view class="sxsss" @click="sxselected(1)">已出款</view>
				<view class="sxssss" @click="sxselected(2)">审核未过</view>
			</view>
			<view v-if="issx" style="background: black;width:100%;height: 100%;z-index: 9999;position: absolute;top: 0;opacity: 0.5;" @click="sx(issx)"></view>
			
			<view style="width:100%;height: 65px;background-color: #1a1a1c;padding-bottom: 3%;" v-for="(item,index) in data">
				
				<view style="width: 70%;color: #818181;font-size: 14px;float: left;padding-left: 3%;padding-top: 3%;">
					<text v-if="item.status == 0">审核中</text>
					<text v-if="item.status == 1">已出款</text>
					<text v-if="item.status == 2">未通过</text>
				</view>
				
				<view style="width: 20%;color:red;font-size: 14px;float: left;padding-left: 3%;padding-top: 3%;" v-if="item.status == 1">{{item.money}}</view>
				<view style="width: 20%;color: #ccc;;font-size: 14px;float: left;padding-left: 3%;padding-top: 3%;" v-if="item.status == 0">{{item.money}}</view>
				<view style="width: 20%;color: #ccc;;font-size: 14px;float: left;padding-left: 3%;padding-top: 3%;" v-if="item.status == 2">{{item.money}}</view>
				
				<view style="width: 100%;color: #818181;font-size: 12px;float: left;padding-left: 3%;padding-top: 3%;">
					<text >单号 {{item.order_no}}</text>
					<text style="margin-left: 3%;">2022-12-04 19:25</text>
				</view>
			</view>
			
	

	</view>
</template>

<script>
	//导入组件
	export default {
		data() {
			return {
              issx:false,
			  data:[]
			}
		},
		methods: {
			   sx(e){
			   	if(e==false){
			   		this.issx=true;
			   	}
			   },
			   sxselected(id){
				   this.issx=false;
				   this.home(id)
			   },
			   black(){
				   uni.navigateBack()
			   },
			   gobetDetail(){
				   uni.navigateTo({
				   	url:'/pages/components/betDetail/betDetail'
				   })
			   },
			   home(type=0){
				   this.$api.request('/api/withdrawList',{type:type}).then((res)=>{
					   this.data = res.data
				   })
			   }
			   
		},
		onShow() { 

		},
		onLoad() {
			this.home()
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #ddd;
	}

	.asset {
	   .head {
	   	background: #151516 !important;
	   	color: #fff;
	   	height: 130rpx;
	   	font-size: 18px;
	   }
	   
	   .head_text {
		 font-size: 14px;
         margin-left: 9%;
	   	 line-height: 160rpx;
	   }
	   .item{
		   width: 100%;
		   float: left;
		   margin-top: 5%;
		   border-bottom: 1px solid #ddd;
		   padding-bottom: 3%;
	   }
	   .sx{
		   width:25%;
		   height: 30px;
		   border:1px solid #d7d7d7;
		   text-align: center;
		   border-radius: 5px;
		   line-height: 30px;
		   background: #fff;
		   margin-left: 5%;
		   float: left;
		   margin-top:3%;
	   }
	   .sxs{
	   		   width:25%;
	   		   height: 30px;
	   		   border:1px solid #cd0006;
	   		   text-align: center;
	   		   border-radius: 5px;
	   		   line-height: 30px;
	   		   background: #fff;
	   		   margin-left: 5%;
	   		   float: left;
	   		   margin-top:3%;
			   color:#cd0006;
			   background: url(../../../static/public/img/xz.png) no-repeat 50% 50%;
			   background-size: 30px;
			   background-position-x: 71px;
			   background-position-y: 5px;
	   }
	   .sxss{
	   		   width:25%;
	   		   height: 30px;
	   		   border:1px solid #cd0006;
	   		   text-align: center;
	   		   border-radius: 5px;
	   		   line-height: 30px;
	   		   background: #fff;
	   		   margin-left: 5%;
	   		   float: left;
	   		   margin-top:3%;
	   			   color:#cd0006;
	   			   background: url(../../../static/public/img/xz.png) no-repeat 50% 50%;
	   			   background-size: 30px;
	   			   background-position-x: 71px;
	   			   background-position-y: 5px;
	   }
	   .sxsss{
	   		   width:25%;
	   		   height: 30px;
	   		   border:1px solid #cd0006;
	   		   text-align: center;
	   		   border-radius: 5px;
	   		   line-height: 30px;
	   		   background: #fff;
	   		   margin-left: 5%;
	   		   float: left;
	   		   margin-top:3%;
	   			   color:#cd0006;
	   			   background: url(../../../static/public/img/xz.png) no-repeat 50% 50%;
	   			   background-size: 30px;
	   			   background-position-x: 71px;
	   			   background-position-y: 5px;
	   }
	   .sxssss{
	   		   width:25%;
	   		   height: 30px;
	   		   border:1px solid #cd0006;
	   		   text-align: center;
	   		   border-radius: 5px;
	   		   line-height: 30px;
	   		   background: #fff;
	   		   margin-left: 5%;
	   		   float: left;
	   		   margin-top:3%;
	   			   color:#cd0006;
	   			   background: url(../../../static/public/img/xz.png) no-repeat 50% 50%;
	   			   background-size: 30px;
	   			   background-position-x: 71px;
	   			   background-position-y: 5px;
	   }
	   .ss {
	   		 text-align: center;
	   		 line-height: 160rpx;
	   		 position: absolute;
	   		 top: 0px;
	   		 left: 42%;
	   }

	}
</style>
